<template>
    <div>
        <h1>你麻痹</h1>
        <h1>Homworke1 作业1</h1>
        <h2>数量增加{{ num }}</h2>
        <input type="button" value="增加" @click="changNum"/>
        <hr>
        
        <p v-for="(index,item) in hobby">{{ index }}--{{ item }}</p>
        <hr>
        <p v-for="item in student">{{ item.name }}--{{ item.age }}--{{ item.num }}</p>
        <hr>
        <input type="text" v-model="username">
        <input type="text" v-model="password">
       <input type="button" value="登录" @click="login">
    </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'
let data:any=reactive({
   
    hobby:['篮球','足球','乒乓球'],
    num:100,
    person:{
        name:'张三',
        age:20,
        sex:'女',
    },
    student:[

    {id:"1",name:"张三",num:1},
    {id:"2",name:"张er",num:2},
    {id:"3",name:"张四",num:3},
    ],
    username:"",
    password:""
      
    
})

let {hobby,num,person,student,username,password}=toRefs(data)
const changNum=()=>{
    num.value++
}
const login=()=>{
    alert("名字"+username.value+"密码"+password.value)
}

</script>

<style scoped>

</style>